<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card class="box-card">

            <!-- 添加角色 -->
            <el-row>
                <el-col><el-button type="primary" @click="showAdd = true">添加角色</el-button></el-col>
            </el-row>

            <!-- 角色列表 -->
            <el-table :data="rolesList" :border="true" :stripe="true">
                <el-table-column type="expand">
                    <template slot-scope="scope"> 
                        <el-row v-for="(role1,index1) in scope.row.children" :key="role1.id" :class="['bdbottom','tag-center',index1===0?'bdtop':'']">
                            <!-- 一级权限 -->
                            <el-col :span="5">
                                <el-tag @close="removeRightById(scope.row,role1.id)" :closable="true">{{role1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 二、三级权限 -->
                            <el-col :span="19">
                                <el-row v-for="(role2,index2) in role1.children" :key="role2.id" :class="['tag-center',index2===0?'':'bdtop']">
                                    <!-- 二级 -->
                                    <el-col :span="6">
                                         <el-tag @close="removeRightById(scope.row,role2.id)" :closable="true" type="success">{{role2.authName}}</el-tag>
                                         <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <!-- 三级 -->
                                    <el-col :span="18">
                                        <el-tag @close="removeRightById(scope.row,role3.id)" :closable="true" v-for="role3 in role2.children" :key="role3.id" type="warning">
                                            {{role3.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditDialog(scope.row)" size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                        <el-button @click="deleteRole(scope.row.id)" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                        <el-button @click="showSetRight(scope.row)" size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>   
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- dialog区域 -->
            <!-- 添加角色 -->
            <el-dialog title="添加角色" @close="addFormClose"  :visible.sync="showAdd" width="50%">
            <el-form :model="roleForm" :rules="roleFormRules" ref="roleForm" label-width="100px">
                <el-form-item label="角色名" prop="roleName">
                    <el-input v-model="roleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="roleForm.roleDesc" ></el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showAdd = false">取 消</el-button>
                    <el-button type="primary" @click="addRole">确 定</el-button>
                </span>
            </el-dialog>
           <!-- 修改角色 -->
            <el-dialog title="修改角色" @close="editFormClose" :visible.sync="showEdit" width="50%">
            <el-form :model="editForm" ref="editForm" label-width="100px">
                <el-form-item label="角色名称">
                    <el-input v-model="editForm.roleName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="editForm.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showEdit = false">取 消</el-button>
                <el-button type="primary" @click="editRole">确 定</el-button>
            </span>
            </el-dialog>
            <!-- 分配权限 -->
            <el-dialog title="分配权限" @close="rightClose"  :visible.sync="showRight" width="50%">
               <el-tree :default-checked-keys="defaultKeys" ref="treeRef" :default-expand-all="true" node-key="id" :data="rightList" :show-checkbox="true" :props="defaultProps"></el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showRight = false">取 消</el-button>
                    <el-button type="primary" @click="setRights">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            rolesList:[],
            rightList:[],
            roleForm:{
                roleName:'',
                roleDesc:''
            },
            roleFormRules:{
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ]
            },
            showAdd:false,
            showEdit:false,
            showRight:false,
            editForm:{
                id:'',
                roleName:'',
                roleDesc:''
            },
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            defaultKeys:[],
            roleId:'',
        }
    },
    methods:{
        //获得角色列表list
        async getRolesList(){
            const{data:res} = await this.$http.get("roles");
            if(res.meta.status!==200)return this.$message.error(res.meta.msg);
            this.rolesList = res.data;
        },
        //清空缓存
        addFormClose(){
            this.$refs.roleForm.resetFields();
        },
        editFormClose(){
            this.$refs.editForm.resetFields();
        },
        //添加角色
        addRole(){
            this.$refs.roleForm.validate(async val=>{
                if(val){
                    //验证表单通过
                    const {data:res} = await this.$http.post("roles",this.roleForm);
                    if(res.meta.status!==201)return this.$message.error(res.meta.msg);
                    this.$message.success(res.meta.msg);
                    //关闭页面
                    this.showAdd = false;
                    //重新加载角色列表
                    this.getRolesList();
                }
            });
        },
        //删除角色
        async deleteRole(id){
            await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //确定删除
                const {data:res}=await this.$http.delete("roles/"+id);
                if(res.meta.status===200){
                    this.$message.success(res.meta.msg);
                    this.getRolesList();
                }else {
                    this.$message.error(res.meta.msg)
                }
            }).catch(() => {
                //取消删除
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //修改页面
        showEditDialog(role){
            this.editForm.id = role.id;
            this.editForm.roleName = role.roleName;
            this.editForm.roleDesc = role.roleDesc;
            this.showEdit = true;
        },
        //编辑角色提交
        async editRole(){
            const{data:res} = await this.$http.put("roles/"+this.editForm.id,{
                roleName:this.editForm.roleName,
                roleDesc:this.editForm.roleDesc
            });
            if(res.meta.status !== 200)return this.$message.error(res.meta.msg);
            this.$message.success("修改成功");
            this.getRolesList();
            this.showEdit = false;
        },
        //tag去除权限
        async removeRightById(role,rightId){
            await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //确定删除
                const {data:res}=await this.$http.delete("roles/"+role.id+"/rights/"+rightId);
                if(res.meta.status===200){
                    this.$message.success(res.meta.msg);
                    role.children = res.data;
                }else {
                    this.$message.error(res.meta.msg)
                }
            }).catch(() => {
                //取消删除
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //分配权限对话框
        async showSetRight(role){
            //获得权限列表
            const{data:res} = await this.$http.get("rights/tree");
            if(res.meta.status!==200)return this.$message.error(res.meta.msg);
            this.rightList = res.data;
            this.showRight = true;
            this.getKeys(role,this.defaultKeys);
            this.roleId = role.id;
        },
        //清空defaultKeys
        rightClose(){
            this.defaultKeys = [];
        },
        async setRights(){
            const keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()];
            var ids = keys.join(',');
            const{data:res} = await this.$http.post("roles/"+this.roleId+"/rights",{rids:ids});
            if(res.meta.status!==200)return this.$message.error(res.meta.msg);
            this.$message.success("分配成功");
            this.getRolesList();
            this.showRight = false;
        },
        //递归获得权限id
        getKeys(node,arr){
            if(!node.children){
                return arr.push(node.id);
            }
            node.children.forEach(item=>{
                this.getKeys(item,arr);
            });
        },
    },
    created(){
        this.getRolesList();
    },
}
</script>

<style lang="less" scoped>
.el-tag{
    margin:7px;
}

.bdbottom{
    border-bottom: 1px solid #eee;
}
.bdtop {
    border-top: 1px solid #eee;
}
.tag-center {
    display: flex;
    align-items: center;
}
</style>